<template>
    <a-drawer :width="1000" title="设备列表" placement="right" :visible="visible" :closable="false" :mask-closable="maskClosable" :destroy-on-close="destroyOnClose" @close="close">
        <a-card>
            <BasicTable ref="tableRef" :params="params" :columns="columns" :query="query" :selectbox="false">
                <template #form>
                    <a-form-item label="序列号" name="no">
                        <a-input v-model:value="params.no" placeholder="请输入序列号" />
                    </a-form-item>
                    <a-form-item label="编号" name="code">
                        <a-input v-model:value="params.code" placeholder="请输入设备编号" />
                    </a-form-item>
                </template>
                <template #button>
                    <a-button type="primary" @click="open(modalRef, { inverterStationId: params.stationId })">
                        <template #icon>
                            <PlusOutlined />
                        </template>
                        新增
                    </a-button>
                </template>
                <template #table="{ body }">
                    <template v-if="body.column.key === 'shelfLife'"> {{ body.record.shelfLife }}月 </template>
                    <template v-if="body.column.key === 'status'">
                        <dict-text v-model:value="body.record.status" dict-code="devicesStatus" />
                    </template>
                    <template v-if="body.column.key === 'action'">
                        <a-button type="link" @click="open(modalRef, body.record)">
                            <template #icon>
                                <EditOutlined />
                            </template>
                            编辑
                        </a-button>
                        <a-popconfirm title="确定要删除吗?" @confirm="del(deleteById, body.record.id, tableRef)">
                            <a-button type="link">
                                <template #icon>
                                    <DeleteOutlined />
                                </template>
                                删除
                            </a-button>
                        </a-popconfirm>
                    </template>
                </template>
            </BasicTable>
        </a-card>
        <Modal ref="modalRef" @close="refresh(tableRef)" />
    </a-drawer>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { deleteById, query } from '/@/api/Inverter/Devices/index.js'
import { useBasicTable } from '@iframe/tools/mixins/BasicTableMixins'
import { useModal } from '@iframe/tools/mixins/ModelDrawerMixins'
import { DictText, BasicTable } from '@iframe/tools/components'
import Modal from './Modal.vue'

const { visible, destroyOnClose, maskClosable, close } = useModal()
const { refresh, del, open } = useBasicTable()

const tableRef = ref()
const modalRef = ref()
const params = reactive({
    stationId: null,
    no: null,
    code: null
})
const columns = [
    {
        title: '序列号',
        dataIndex: 'no',
        key: 'no',
        align: 'center'
    },
    {
        title: '设备编号',
        dataIndex: 'code',
        key: 'code',
        align: 'center'
    },
    {
        title: '出厂日期',
        dataIndex: 'productionDate',
        key: 'productionDate',
        align: 'center'
    },
    {
        title: '保质期',
        dataIndex: 'shelfLife',
        key: 'shelfLife',
        align: 'center'
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
        width: 160
    },
    {
        title: '操作',
        key: 'action',
        align: 'center',
        width: 200
    }
]
const openDrawer = record => {
    params.stationId = record.id
    visible.value = true
}
defineExpose({ open: openDrawer })
</script>
